<script setup>
import { ref } from "vue"
  const title = ref('店店有客')
  const copy = ref('服务本地生活,助力门店经营')
  const list = ref([
    {
      id:1,
      image:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/hua_yulan_sv_bg1.png',
      icheck:'icheck1',
      tcheck:'tcheck1'
    },
    {
      id:2,
      image:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/hua_yulan_sv_bg2.png',
      icheck:'icheck2',
      tcheck:'tcheck2'
    },
    {
      id:3,
      image:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/hua_yulan_sv_bg3.png',
      icheck:'icheck3',
      tcheck:'tcheck3'
    },
    {
      id:4,
      image:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/hua_yulan_sv_bg4.png',
      icheck:'icheck4',
      tcheck:'tcheck4'
    },
    {
      id:5,
      image:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/hua_yulan_sv_bg5.png',
      icheck:'icheck5',
      tcheck:'tcheck5'
    },
    {
      id:6,
      image:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/hua_yulan_sv_bg6.png',
      icheck:'icheck6 ',
      tcheck:'tcheck6'
    },
  ])
  const choose = ref(null)
  const open = () => {
    choose.value.open('bottom')
  }
  const isChecked = ref(0)
const check = (e) => {
  isChecked.value = e
  if(!e){

  }
}
const close = () => {
  choose.value.close()
  drow()
}
const drow = () => {
  const query = uni.createSelectorQuery();
    const ctx = uni.createCanvasContext('#myCanvas')
    query.select('.input').boundingClientRect(function(rects) {
      console.log(rects);
      console.log(list.value[isChecked.value].image);
      ctx.drawImage(list.value[isChecked.value].image, 0, 0, 500, 500)
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        width: 500,
        height: 500,
        success: function(res) {
       // 在H5平台下，tempFilePath 为 base64
        console.log(res.tempFilePath)
        },
        fail:function(err) {
          console.log(err);
        }
      })
    }).exec();
}
</script>
<template>
    <view class="page"> 
      <canvas canvas-id="myCanvas" style="width: 1000rpx;height: 1000rpx;position: absolute;top: -99999;left: -999;"></canvas>
      <image class="bgi" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg1_bg.png"/>
      <input v-show="isChecked!=0" class="input" :class="isChecked?list[isChecked-1].icheck:''" v-model="title" type="text">
      <textarea 
      v-show="isChecked!=0" 
      class="textarea" 
      :class="isChecked?list[isChecked-1].tcheck:''" 
      v-model="copy" 
      auto-height
      ></textarea>
      <input v-if="isChecked==6" class="mcheck6" type="text">
      <view class="bottom">
        <text class="set" @click="open">样式设置</text>
        <button class="button">完成</button>
      </view>
    </view>
    <uni-popup ref="choose">
      <view class="popup">
          <view class="close">
            <image @click="close" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
              选择样式
            <text class="add" @click="close">添加</text>
          </view>
          <view class="content">
            <view style="display: inline-block;" class="li">
              <view class="item" @click="check(0)" :class="isChecked===0?'check':''">
                <image style="width: 132rpx;height: 132rpx;" src=""/>
              </view>
            </view>
            <view style="display: inline-block;" class="li" v-for="item in list" :key="item.id">
              <view class="item" :class="isChecked==item.id?'check':''" @click="check(item.id)">
                <image class="item-input" :src="item.image"/>
              </view>
            </view>
          </view>
      </view>
    </uni-popup>
</template>

<style lang="scss">
 .page{
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    height: 100%;
    .bgi{
      width: 100%;
      height: 100%;
    }
    .input{
      width: 574rpx;
      height: 96rpx;
      position: absolute;
      top: 156rpx;
      left: 88rpx;
      font-size: 52rpx;
      font-weight: 700;
      text-shadow: 0 4rpx 0 rgb(0,0,0);
      color: #fff;
      text-align: center;
    }
    .textarea{
      width: 670rpx;
      position: absolute;
      height: 84rpx;
      top: 276rpx;
      left: 40rpx;
      text-align: center;
      // padding: 18rpx 8rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
    }
    .bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 166rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 10rpx 30rpx 0;
      .set{
        font-size: 28rpx;
        color: rgb(142,84,244);
      }
      .button{
        width: 554rpx;
        height: 88rpx;
        border-radius: 8rpx;
        background-color: rgb(241,241,241);
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
        color: rgb(192,196,204);
        margin: 0;
      }
    }
 }
 .popup{
  width: 100%;
  height: 814rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;


    .close {
        width: 100%;
        height: 108rpx;
        text-align: center;
        line-height: 108rpx;
        font-size: 32rpx;
        font-weight: 700;
        color: rgb(48, 49, 51);
        border-bottom: 1px solid rgb(220,223,230);
        .close-btn {
          position: absolute;
          top: 30rpx;
          left: 30rpx;
          width: 48rpx;
          height: 48rpx;
        }
        .add{
          position: absolute;
          right: 30rpx;
          font-size: 28rpx;
          color: rgb(142,84,244);
        }
    }
    .content{
      width: 100%;
      height: 706rpx;
      padding: 30rpx;
      padding-bottom: 68rpx;
      box-sizing: border-box;
      overflow-y: scroll;
      .li{
        .item{
          position: relative;
          width: 332rpx;
          height: 248rpx;
          background-color: rgb(249,249,249);
          border-radius: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid rgba(0,0,0,0);
      
      .item-input{
        width: 296rpx;
        height: 132rpx;
      }
      }
        &:nth-child(2n-1){
        margin: 0 18rpx 18rpx 0;
      }
      }
      
      
    }
  
 }
 .check{
  background-color: rgb(249,246,254) !important;
  border: 1px solid rgb(142,84,244) !important; 
 }

 .icheck1{
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg1.png);
  background-size: cover;
  font-size: 52rpx !important;
  font-weight: 700 !important;
  letter-spacing: 0rpx;
  color: #fff !important;
  text-shadow: 0rpx 4rpx 0rpx rgb(0,0,0);
 }
 .tcheck1{
  background-color: rgb(175,100,232);
  font-size: 32rpx !important;
  color: #fff !important;
  font-weight: 500 !important;
 }
 .icheck2{
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg2.png);
  background-size: cover;
  font-size: 52rpx !important;
  font-weight: 700 !important;
  letter-spacing: 0rpx;
  color: rgb(248,202,70) !important;
  -webkit-text-stroke: 2rpx rgb(22,54,167);
 }
 .tcheck2{
  background-color: rgb(128,189,255);
  font-size: 32rpx !important;
  color: rgb(6,39,156) !important;
  font-weight: 500 !important;
 }
 .icheck6{
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg6.png);
  background-size: cover;
  font-size: 52rpx !important;
  height: 200rpx !important;
  width: 670rpx !important;
  font-weight: 700 !important;
  top: 144rpx !important;
  left: 40rpx !important;
  letter-spacing: 0rpx;
  line-height: 250rpx !important;
  color: #000 !important;
  padding-top: 20rpx;
  box-sizing: border-box;
  -webkit-text-stroke: 2rpx rgb(248,182,45);
  &:focus{
    padding-top: 20rpx;
  }
 }
 .tcheck6{
  background-color: transparent;
  font-size: 48rpx !important;
  color: rgb(248,282,45) !important;
  font-weight: 500 !important;
  top: 356rpx !important;
  -webkit-text-stroke: 2rpx black;
  
 }
 .mcheck6{
  position: absolute;
  top: 430rpx;
  left: 292rpx;
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg6_1.png);
  background-size: cover;
  width: 168rpx;
  height: 48rpx;
  text-align: left;
  line-height: 48rpx;
  font-size: 28rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
  color: rgb(143,71,0);
 }
 .icheck3{
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg3.png);
  background-size: cover;
  font-size: 52rpx !important;
  font-weight: 700 !important;
  letter-spacing: 0rpx;
  color: rgb(28,25,22) !important;
  text-shadow: 2rpx 2rpx 0rpx rgb(255,255,255);
 }
 .tcheck3{
  background-color: rgb(252,182,146);
  font-size: 32rpx !important;
  color: rgb(145,65,0) !important;
  font-weight: 500 !important;
 }
 .icheck4{
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg4.png);
  background-size: cover;
  font-size: 52rpx !important;
  font-weight: 700 !important;
  letter-spacing: 0rpx;
  color: #fff !important;
  -webkit-text-stroke: 2rpx black;
 }
 .tcheck4{
  background-color: rgb(146,182,234);
  font-size: 32rpx !important;
  color: rgb(0,0,0) !important;
  font-weight: 500 !important;
 }
 .icheck5{
  background-image: url(https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huazi_bg_bg5.png);
  background-size: cover;
  font-size: 52rpx !important;
  font-weight: 700 !important;
  letter-spacing: 0rpx;
  color: rgb(0,125,153) !important;
  -webkit-text-stroke: 2rpx #fff;
 }
 .tcheck5{
  background-color: rgb(151,234,247);
  font-size: 32rpx !important;
  color: rgb(4,109,133) !important;
  font-weight: 500 !important;
 }
 

</style>